<template>
  <div :class="left_nav_show?'z_index4':'z_index2'" class="left_nav_new">
    <div class="left_menu">
      <template>
        <ul>
          <template v-for="(item,index) in left_menu_list">
            <template>
              <li :class="item.url == current_url?'active':'' || item.url==''?'opacity20':''">
                <a @click="nav_click(item.index)" class="cf pr" href="javascript:;">
                  <span class="menu_text">{{item.name}}</span>
                </a>
              </li>
            </template>
          </template>
        </ul>
      </template>
    </div>
  </div>
</template>

<script>

  var _this
  export default {
    data() {
      return {
        left_nav_show: true,//左侧导航是否显示
        current_url: '',
        left_menu_list: [
          {
            url: '/company/layout/info',
            index: 0,
            name: '基本信息',
            type: '00'
          }, {
            url: '',
            index: 1,
            name: '部门管理',
            type: '01'
          }, {
            url: '',
            index: 2,
            name: '用户管理',
            type: '02'
          }, {
            url: '/company/layout/branchList',
            index: 3,
            name: '地址管理',
            type: '03'
          }
        ]
      }
    },
    computed: {},
    mounted() {
      _this = this
      _this.nav_set()
    },
    methods: {
      nav_set: function() {//判断当前应当加载哪个页面
        this.$nextTick(function() {
          _this.current_url = _this.$route.path
        })
      },
      //左侧导航显示
      left_nav_show_child: function() {
        _this.left_nav_show = true
      },
      //左侧导航隐藏
      left_nav_hide_child: function() {
        _this.left_nav_show = false
      },
      //左侧导航点击
      nav_click: function(index) {
        _this.$parent.loading = true
        if (_this.left_menu_list[index].url) {
          for (var i = 0; i < _this.left_menu_list.length; i++) {
            if (this.left_menu_list[i].index === index) {
              _this.current_url = _this.left_menu_list[i].url
              this.$router.push({
                path: _this.left_menu_list[i].url,
                query: {
                  date: new Date().getTime()
                }
              })
              _this.$parent.loading = false
            }
          }
        } else {
          alert('敬请期待')
        }

      }
    }
  }
</script>

<style lang="scss">

  /*左侧导航*/
  .left_nav_new {
    width: 180px;
    background-color: #EFF2F6;
    position: fixed;
    left: 0;
    /*top: 0;*/
    /*bottom: 0;*/
    z-index: 3;
  }

  .left_menu {
    height: calc(100vh - 50px);
    overflow-y: auto;
    line-height: 34px;
    /*padding-top: 50px;*/
  }

  .left_menu > ul {
    margin: 20px 0 0 20px;
  }

  .left_menu > ul > li {
    padding-bottom: 10px;
  }

  .left_menu > ul > li > a {
    display: block;
    color: #3A3F50;
    transition: .3s;
    font-weight: 600;
    padding: 3px 0;
    text-align: center;
  }

  .left_menu > ul > li.active > a, .left_menu > ul > li > a:hover {
    background: #FFFFFF;
    border-radius: 4px 0 0 4px;
    color: #1790FF;
  }

  .left_menu > ul > li.active > a {
    background: #FFFFFF;
  }

  .left_menu > ul > li > a > span.menu_text {
    font-size: 14px;
    display: inline-block;
    vertical-align: middle;
  }


  .left_menu::-webkit-scrollbar {
    width: 8px;
    height: 10px;
    background-color: rgba(0, 0, 0, 0)
  }

  .left_menu::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background-color: rgba(255, 255, 255, .4);
    transition: all .4s ease;
    -moz-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    -o-transition: all .4s ease
  }

  .left_menu::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, .1)
  }

  @media screen and (max-width: 1400px) {
    .left_menu > ul > li > a > span.menu_text {
      font-size: 12px;
    }

    .left_menu > ul > li h2 {
      font-size: 12px;
    }
  }

  .opacity20 {
    opacity: 0.5;
  }


</style>
